<template>
  <div class="commission-table">
    <div class="header-handle">
      <div class="left">
        <span class="btn" @click="operationAll">{{$t('trade.allCancelOrder')}}</span>
        <span class="btn" @click="withdrawal">{{$t('trade.cancelOrder')}}</span>
        <!-- <el-radio v-model="comRadio" label="1">{{$t('trade.displayAll')}}</el-radio>
        <el-radio v-model="comRadio" label="2">{{$t('trade.displayCanCancel')}}</el-radio>-->
        <!-- <span class="btn">{{$t('trade.editLimitStop')}}</span>-->
		<!-- 合计成交手数 -->
		<span class="user-item">{{$t('trade.sum_deal_num')}}：{{Number(sum_deal_num)}}</span>
      </div>
    </div>
    <div class="table-box">
      <table border="0" cellspacing="0" cellpadding="0" class="dTable">
        <thead>
          <tr>
            <th>{{$t('trade.contract')}}</th>
            <th>{{$t('trade.status')}}</th>
            <th>{{$t('trade.transition')}}</th>
            <th>{{$t('trade.openClose')}}</th>
            <th>{{$t('trade.entrustPrice')}}</th>
            <th>{{$t('trade.entrustType')}}</th>
            <th>{{$t('trade.entrustVol')}}</th>
			<th>{{$t('trade.dealNum')}}</th>
            <th>{{$t('trade.averagePrice')}}</th>
            <th>{{$t('trade.numbering')}}</th>
            <th>{{$t('trade.entrustTime')}}</th>
            <th>{{$t('trade.dealTime')}}</th>
          </tr>
        </thead>
        <tbody>
          <!-- 无数据时展示 -->
          <tr v-if="tableList.length === 0" class="noneInfo">
            <td>{{$t('msg.noData')}}</td>
          </tr>
          <!-- 数据列表 -->
          <tr
            v-else
            v-for="(item, index) in tableList"
            :key="item.Numbering"
            :class="{active:index === comIndex}"
            @click="switchComTr(index)"
          >
            <!-- 合约名称 -->
            <td>
              <div v-if="item.Name">{{item.Name}}</div>
              <div v-else>--</div>
            </td>
            <!-- 状态 -->
            <td>
              <div v-if="item.Status">{{item.Status}}</div>
              <div v-else>--</div>
            </td>
            <!-- 买卖 -->
            <td>
              <div v-if="item.Business">{{item.Business}}</div>
              <div v-else>--</div>
            </td>
            <!-- 开平 -->
            <td>
              <div v-if="item.Kaiping">{{item.Kaiping}}</div>
              <div v-else>--</div>
            </td>
            <!-- 委托价 -->
            <td>
              <div v-if="item.ReportPrice">{{item.ReportPrice}}</div>
              <div v-else>--</div>
            </td>
            <!-- 委托类型 -->
            <td>
              <div v-if="item.Category">{{item.Category}}</div>
              <div v-else>--</div>
            </td>
            <!-- 委托量 -->
            <td>
              <div v-if="item.ReportHand">{{item.ReportHand}}</div>
              <div v-else>--</div>
            </td>
			<!-- 成交量 -->
			<td>
			  <div>{{item.ReportHand-item.UnpaidLot}}</div>
			  <!-- <div v-else>--</div>-->
			</td>
            <!-- 成交均价 -->
            <td>
              <div v-if="item.AveragePrice">{{item.AveragePrice}}</div>
              <div v-else>--</div>
            </td>
            <!-- 委托号 -->
            <td>
              <div v-if="item.Numbering">{{item.Numbering}}</div>
              <div v-else>--</div>
            </td>
            <!-- 委托时间 -->
            <td>
              <div v-if="item.DateTime && item.DateTime !== '0'">{{item.DateTime}}</div>
              <div v-else>--</div>
            </td>
            <!-- 成交时间 -->
            <td>
              <div v-if="item.LastTime && item.LastTime !== '0'">{{item.LastTime}}</div>
              <div v-else>--</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import * as trade from "../../../request/trade";
export default {
  name: "Commission",
  computed: {
    tableList() {
      return this.$store.getters.commissionlist;
    },
	sum_deal_num(){
		let temp_list = this.$store.getters.commissionlist;
		let temp_num = 0;
		temp_list.map((item)=>{
			temp_num +=item.ReportHand-item.UnpaidLot;
		})
		
		return temp_num;
	}
  },
  data() {
    return {
      // comRadio: "1", // 1显示全部2显示可撤
      comIndex: -1 // 当前选中的委托单
    };
  },
  methods: {
    switchComTr(i) {
      // 委托列表table表格选中事件
      this.comIndex = i;
    },
    // 全部撤单
    operationAll() {
			
			if (this.tableList.length === 0 ) {
			  this.$store.dispatch("bar/switchAlert", {
			    msg: this.$t("tip.noFlat"),
			    type: 2
			  });
			  return;
			}
      this.$store.dispatch("panel/playTipsAudio", 6);
      this.$store.dispatch("bar/changeLoadings", {
        status: true,
        msg: this.$t("tip.placeWait")
      });

      trade.wsSend("30;" + this.$store.getters.userip + ";");
    },
    withdrawal() {
      if (this.comIndex === -1) {
        this.$store.dispatch("bar/switchAlert", {
          msg: this.$t("tip.selectRevokeEntrust"),
          type: 2
        });
        return;
      }
      this.$store.dispatch("panel/playTipsAudio", 6);
      this.$store.dispatch("bar/changeLoadings", {
        status: true,
        msg: this.$t("tip.placeWait")
      });
      let nowData = this.tableList[this.comIndex];

      // 委托单取消(16) 发送：16;委托单号;IP;
      trade.wsSend(`16;${nowData.Numbering};${this.$store.getters.userip};`);
    }
  }
};
</script>

<style lang="scss">
.commission-table {
  .header-handle {
    .el-radio {
      margin-right: 12px;
      .el-radio__label {
        font-size: 12px;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.commission-table {
  margin: 2px;
  height: 100%;
  .header-handle {
    display: flex;
    justify-content: space-between;
    padding: 3px 0px 4px 3px;
    .btn {
      border-radius: 3px;
      font-size: 12px;
      background: linear-gradient(to bottom, #fff 0%, #e0dedf 100%);
      cursor: pointer;
      color: #191a15;
      outline: none;
      padding: 1px 5px;
      border: 1px solid;
      margin-right: 3px;
      &:hover {
        border-color: #de9621;
      }
    }
	.user-item {
	  margin-right: 6px;
	  &.name {
	    margin-right: 8px;
	    line-height: 34px;
	  }
	}
  }
  .table-box {
    height: calc(100% - 27px);
    border: 1px solid #b1bbc0;
    border-right: 0;
  }
}
</style>
